<template>
  <el-row>
    <el-col :span="4">
      <el-form-item label="交易卡号">
        <el-input v-model="j_y_k_h" size="small"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item label="交易户名">
        <el-input v-model="j_y_h_m" size="small"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item label="交易金额">
        <el-input v-model="j_y_j_e" size="small" type="number"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item label="交易时间-开始">
        <el-date-picker
          v-model="j_y_s_j_start"
          size="small"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :picker-options="datePickerOptions"
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item label="交易时间-结束">
        <el-date-picker
          v-model="j_y_s_j_end"
          size="small"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :picker-options="datePickerOptions"
        ></el-date-picker>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="4">
      <el-form-item label="对手户名">
        <el-input v-model="d_s_h_m" size="small"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item label="对手卡号">
        <el-input v-model="j_y_d_s_z_h" size="small"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <div>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-button type="danger" @click="reset">清空搜索条件</el-button>
  </div>
</template>

<script setup lang="ts">
import { ElRow, ElCol, ElFormItem, ElInput, ElDatePicker } from 'element-plus';
import {useSubTaskStore} from "../stores/index"
import {toRef} from 'vue'
import { ElMessage } from 'element-plus'

const subTaskStore = useSubTaskStore()
const datePickerOptions =     {
  //配置
  start: 'year',
}

const search = () => {

  if ((subTaskStore.search.j_y_s_j.start !== '' && subTaskStore.search.j_y_s_j.start !== null) === (subTaskStore.search.j_y_s_j.end !== '' && subTaskStore.search.j_y_s_j.end !== null)) {    // 两个变量同时为空或同时有值的情况下执行操作
  } else {
    // 其他情况下执行操作
    ElMessage.error('错误, 交易时间必须有开始和结束两个时间。')
    return;
  }

  subTaskStore.loadData()
}

const j_y_k_h = toRef(subTaskStore.search, 'j_y_k_h')
const j_y_h_m = toRef(subTaskStore.search, 'j_y_h_m')
const j_y_j_e = toRef(subTaskStore.search, 'j_y_j_e')
const j_y_s_j_start = toRef(subTaskStore.search.j_y_s_j, 'start') // 使用toRef将j_y_s_j_start转换为响应式引用
const j_y_s_j_end = toRef(subTaskStore.search.j_y_s_j, 'end') // 使用toRef将j_y_s_j_end转换为响应式引用
const d_s_h_m = toRef(subTaskStore.search, 'd_s_h_m')
const j_y_d_s_z_h = toRef(subTaskStore.search, 'j_y_d_s_z_h')


const reset = () => {
  subTaskStore.clearWhere()
  // 重置所有变量的值
  // j_y_k_h.value = ''
  // j_y_z_h.value = ''
  // j_y_j_e.value = ''
  // j_y_s_j_start.value = ''
  // j_y_s_j_end.value = ''
  // d_s_h_m.value = ''
  // j_y_d_s_z_h.value = ''
}
</script>
